<template>
  <div>
    <div id="container1">
      <div><h3>系统消息表</h3></div>
      <div style="text-align: right; width: 95%">
        <el-button type="primary" size="mini" @click="addMessage"
          >添加信息</el-button
        >
      </div>
      <el-table
        ref="multipleTable"
        :data="pageInfo1.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
      >
        <el-table-column label="消息编号" prop="mid" align="center">
        </el-table-column>
        <el-table-column prop="title" label="消息标题" align="center">
        </el-table-column>
        <el-table-column prop="softdel" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.softdel == 0" style="color: red">禁用</span>
            <span v-if="scope.row.softdel == 1" style="color: green">启用</span>
          </template>
        </el-table-column>
        <el-table-column label="消息内容" align="center">
          <template slot-scope="scope">
            <span style="color: orange" @click="messageDetail(scope.row)"
              >点击查看详情</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="updMessage(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.softdel == 1"
              type="danger"
              size="mini"
              @click="softdelMessage(scope.row)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.softdel == 0"
              type="success"
              size="mini"
              @click="useMessage(scope.row)"
              >启用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="pageInfo1.pageNum"
        :page-sizes="[3, 5, 10]"
        :page-size="pageInfo1.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo1.total"
      >
      </el-pagination>
      <!--添加模态框开始-->
      <el-dialog title="添加消息" :visible.sync="addDialogVisible">
        <el-form :model="messageAddForm">
          <el-form-item label="消息标题">
            <el-input v-model="messageAddForm.title"></el-input>
          </el-form-item>
          <el-form-item label="消息内容">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="messageAddForm.content"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSaveClick"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!--添加模态框结束-->
      <!--修改模态框开始-->
      <el-dialog title="修改消息" :visible.sync="updDialogVisible">
        <el-form :model="messageUpdForm">
          <el-form-item label="消息标题">
            <el-input v-model="messageUpdForm.title"></el-input>
          </el-form-item>
          <el-form-item label="消息内容">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="messageUpdForm.content"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="updDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleUpdSaveClick"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!--修改模态框结束-->
      <!--消息内容模态框开始-->
      <el-dialog title="消息内容" :visible.sync="contentDialogVisible">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="messageContent"
        >
        </el-input>
        <div slot="footer" class="dialog-footer" align="center">
          <el-button @click="contentDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!--消息内容模态框结束-->
    </div>


    <div id="container2">
      <div><h3>消息发送记录表</h3></div>
      <el-table
        ref="multipleTable"
        :data="pageInfo2.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
      >
        <el-table-column label="记录编号" prop="smid" align="center">
        </el-table-column>
        <el-table-column prop="tbCustomer.phone" label="客户账号" align="center">
        </el-table-column>
        <el-table-column prop="tbCustomer.cname" label="客户姓名" align="center">
        </el-table-column>
        <el-table-column prop="sendTime" label="发送日期" align="center">
        </el-table-column>
        <el-table-column prop="tbMessage.mid" label="消息编号" align="center">
        </el-table-column>
        <el-table-column prop="tbMessage.title" label="消息标题" align="center">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="pageInfo2.pageNum"
        :page-sizes="[5, 10]"
        :page-size="pageInfo2.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo2.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
#container1 {
  width: 95%;
  height: 400px;
  margin: auto;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
#container2 {
  width: 95%;
  height: 480px;
  margin: auto;
  margin-top: 30px;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
</style>
<script>
import {
  getMessageList,
  saveMessage,
  getMessageByMid,
  saveUpdMessageBy,
  softdelMessageByMid,
  useMessageByMid,
  getSendMessageList,
} from "@/api/message.js";
export default {
  data() {
    return {
      pageInfo1: {
        pageNum: 1,
        pageSize: 3,
      },
      addDialogVisible: false,
      messageAddForm: {},
      messageContent: "",
      contentDialogVisible: false,

      updDialogVisible: false,
      messageUpdForm: {},

      /**
       * 以下为发送消息表的相关内容
       */
      pageInfo2: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  methods: {
    /**
     * 系统消息板块
     */
    handleSizeChange1(val) {
      this.pageInfo1.pageSize = val;
      this.pageInfo1.pageNum = 1;
      this.loadMessageList();
    },
    handleCurrentChange1(val) {
      this.pageInfo1.pageNum = val;
      this.loadMessageList();
    },
    loadMessageList() {
      var data = {
        pageNum: this.pageInfo1.pageNum,
        pageSize: this.pageInfo1.pageSize,
      };
      getMessageList(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo1 = res.data.data;
        }
      });
    },
    addMessage() {
      this.addDialogVisible = true;
    },
    handleAddSaveClick() {
      var data = {
        title: this.messageAddForm.title,
        content: this.messageAddForm.content,
      };
      saveMessage(data).then((res) => {
        if ((res.data.code = 200)) {
          alert("添加成功");
          this.addDialogVisible = false;
          this.messageAddForm = {};
          this.loadMessageList();
        }
      });
    },
    messageDetail(row) {
      this.contentDialogVisible = true;
      this.messageContent = row.content;
    },
    updMessage(row) {
      this.updDialogVisible = true;
      getMessageByMid(row.mid).then((res) => {
        this.messageUpdForm = res.data.data;
      });
    },
    handleUpdSaveClick() {
      var data = {
        mid: this.messageUpdForm.mid,
        title: this.messageUpdForm.title,
        content: this.messageUpdForm.content,
      };
      saveUpdMessageBy(data).then((res) => {
        if (res.data.code == 200) {
          alert("修改成功");
          this.updDialogVisible = false;
          this.messageUpdForm = {};
          this.loadMessageList();
        }
      });
    },
    softdelMessage(row) {
      var data = row.mid;
      softdelMessageByMid(data).then((res) => {
        if (res.data.code == 200) {
          this.loadMessageList();
        }
      });
    },
    useMessage(row) {
      var data = row.mid;
      useMessageByMid(data).then((res) => {
        if (res.data.code == 200) {
          this.loadMessageList();
        }
      });
    },

    /**
     * 发送消息表
     */
    handleSizeChange2(val) {
      this.pageInfo2.pageSize = val;
      this.pageInfo2.pageNum = 1;
      this.loadSendMessageList();
    },
    handleCurrentChange2(val) {
      this.pageInfo2.pageNum = val;
      this.loadSendMessageList();
    },
    loadSendMessageList(){
        var data = {
        pageNum: this.pageInfo2.pageNum,
        pageSize: this.pageInfo2.pageSize,
      };
        getSendMessageList(data).then(res=>{
            if(res.data.code==200){
                this.pageInfo2 = res.data.data;
            }
        })
    },
  },
  mounted() {
    this.loadMessageList();
    this.loadSendMessageList();
  },
};
</script>